<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一层  添加按钮以及全局搜索框 -->
    <Row :class="'m-0'">
      <Col span="9">
        <div class="search">
          <Input
            search
            placeholder="按照名字模糊检索"
            v-model="searchIndistinctName"
            :class="'m-2'"
          />
        </div>
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="searchInterviewList"
          icon="ios-search"
          >查询</Button
        >
      </Col>
      <Col span="3" push="2">
        <Button class="m-2 w-50" disabled type="success" @click="excelOut()"
          >导出</Button
        >
      </Col>
    </Row>
    <div :style="isShow ? alllist : apart">
      <!-- 第二行 -->
      <Row :class="'m-0'">
        <Col span="4">
          <Input :class="'w-75 m-2'" v-model="searchName" placeholder="姓名" />
        </Col>
        <Col span="4">
          <Input :class="'w-75 m-2'" v-model="searchTel" placeholder="电话" />
        </Col>
        <Col span="3">
          <Date-picker
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchInterviewStartTime"
            placeholder="到访开始时间"
            transfer
          >
          </Date-picker>
        </Col>
        <div class="to">~</div>
        <Col span="3">
          <Date-picker
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchInterviewEndTime"
            placeholder="到访结束时间"
            transfer
          >
          </Date-picker>
        </Col>
      </Row>
      <!-- 第三行 -->
      <Row :class="'m-0'">
        <Col span="4">
          <i-col :class="'w-75 m-2'">
            <Select
              v-model="searchStatu"
              filterable
              clearable
              transfer
              placeholder="线索状态"
            >
              <Option
                v-for="item in sourceList"
                :value="item.value"
                :disabled="item.isDisabled"
                >{{ item.label }}
              </Option>
            </Select>
          </i-col>
        </Col>
        <Col span="4">
          <i-col :class="'w-75 m-2'">
            <Select
              placeholder="请选择接待者"
              v-model="searchAutor"
              filterable
              clearable
              transfer
              :disabled="isSelectAutor"
            >
              <Option v-for="item in autorList" :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </i-col>
        </Col>
        <Col span="3">
          <Date-picker
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchReservationTryStartTime"
            placeholder="预约试听开始时间"
            transfer
          >
          </Date-picker>
        </Col>
        <div class="to">~</div>
        <Col span="3">
          <Date-picker
            :class="'w-100 m-2'"
            type="datetime"
            v-model="searchReservationTryEndTime"
            placeholder="预约试听结束时间"
            transfer
          >
          </Date-picker>
        </Col>
      </Row>
      <!-- 第四行 -->

      <Row :class="'m-0'">
		<Col span="4">
			<i-col :class="'w-75 m-2'">
			  <Select
				v-model="searchSource"
				placeholder="线索来源"
				filterable
				clearable
			  >
				<Option v-for="item in orsourceList" :value="item.value"
						>{{ item.label }}
				</Option>
			  </Select>
			</i-col>
		</Col>
        <Col span="4">
          <Input
            :class="'w-75 m-2'"
            v-model="searchYpzw"
            placeholder="应聘职位"
          />
        </Col>
        <Col span="3">
          <Date-picker
            :class="'m-2  w-100'"
            type="datetime"
            v-model="searchReservationBackviewStartTime"
            placeholder="预约回访开始时间"
          >
          </Date-picker>
        </Col>
        <div class="to">~</div>
        <Col span="3">
          <Date-picker
            :class="'m-2 w-100'"
            type="datetime"
            v-model="searchReservationBackviewEndTime"
            placeholder="预约回访结束时间"
          >
          </Date-picker>
        </Col>
      </Row>
    </div>
    <!-- 展开/收起 -->
    <div class="hidden">
      <span v-if="isShow" @click="showAll"
        >展开 <Icon type="ios-arrow-down"
      /></span>
      <span v-if="!isShow" @click="showPart"
        >收起 <Icon type="ios-arrow-up"
      /></span>
    </div>

    <!-- 表格 v-if="isLight(n)"<!-- :style="isLight ? shouldLight : notlight" -->
    <Layout :class="'bg-white'">
      <Table
        disabled-hover
        border
        :class="'m-1'"
        :columns="tableInfo.columnInfo"
        :data="tableInfo.data"
        :row-class-name="rowClassName"
      >
        <!-- 名字超链接 -->
        <template slot-scope="{ row, index }" slot="name">
          <Row>
            <Col>
              <a @click="showPersonDetail(row)">{{ row.name }}</a>
            </Col>
          </Row>
        </template>
        <!-- 下拉菜单 -->
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button type="primary" @click="show(row)"
                  >详细</Button
                ></DropdownItem
              >
              <DropdownItem>
                <Button type="primary" @click="updateInterviewAutor(row)"
                  >分配</Button
                >
              </DropdownItem>
              <DropdownItem
                ><Button
                  :disabled="row.autorId == null"
                  type="primary"
                  @click="newbaoming(row)"
                  >转报名</Button
                ></DropdownItem
              >
              <DropdownItem>
                <Button type="primary" @click="newTry(row)">转试听</Button>
              </DropdownItem>
              <DropdownItem>
                <Button type="primary" @click="addBackview(row)"
                  >新增回访</Button
                >
              </DropdownItem>
              <DropdownItem>
                <Button type="primary" @click="addReservationTryTime(row)"
                  >预约试听时间</Button
                >
              </DropdownItem>
              <DropdownItem>
                <Button type="primary" @click="addReservationBackviewTime(row)"
                  >预约回访时间</Button
                >
              </DropdownItem>
              <DropdownItem>
                <Button type="error" @click="abandon(row)">放弃</Button>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="tableInfo.size"
        @on-change="pageSearch"
        :total="tableInfo.total"
        :current="tableInfo.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>

    <!-- <Layout :class="'bg-white'">
      <Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="primary" size="small" style="margin-right: 5px" @click="show(row)">详细</Button>
          <Button type="error" size="small" @click="remove(row.userId)">删除</Button>
        </template>
      </Table>
      <Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
        :total="tableInfo.total" />
    </Layout> -->
  </Layout>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    let self = this
    return {
      searchIndistinctName: '',
      visible: false,
      alllist: 'height: 90px;transition:all linear .1s;overflow:hidden',
      apart: 'height: 130px;transition:all linear .1s',
      isShow: true,
      searchName: '',
      searchTel: '',
      searchStatu: '',
      searchSource: '',
      searchYpzw: '',
      searchAutor: '',
      searchInterviewStartTime: '',
      searchInterviewEndTime: '',
      searchReservationTryStartTime: '',
      searchReservationTryEndTime: '',
      searchReservationBackviewStartTime: '',
      searchReservationBackviewEndTime: '',
      tableInfo: {
        page: 1,
        size: 10,
        total: 0,
        pageSize: 0,
        columnInfo: [
          {
            title: '#',
            width: 80,
            fixed: 'left',
            align: 'center',
            render: (h, params) => {
              return h(
                'span',
                params.index +
                  (self.tableInfo.page - 1) * self.tableInfo.size +
                  1
              )
            },
          },
          {
            title: '学生姓名',
            slot: 'name',
            width: 100,
            fixed: 'left',
          },
          {
            title: '联系电话',
            key: 'tel',
            width: 150,
            fixed: 'left',
          },
          {
            title: '到访描述',
            key: 'des',
            width: 150,
          },
          {
            title: '接待时间',
            key: 'datetime',
            width: 200,
          },
          {
            title: '预约试听时间',
            key: 'reservationTryTime',
            width: 200,
          },
          {
            title: '预约回访时间',
            key: 'reservationBackviewTime',
            width: 200,
          },
          {
            title: '来访有效开关',
            key: 'flg',
            width: 200,
            align: 'center',
            render: function(h, params) {
              return h('div', [
                h('i-switch', {
                  props: {
                    type: 'primary',
                    size: 'large',
                    value: params.row.flg,
                    'true-value': true,
                    'false-value': false,
                  },
                  scopedSlots: {
                    open: function() {
                      return h('span', '有效')
                    },
                    close: function() {
                      return h('span', '无效')
                    },
                  },
                  on: {
                    'on-change': (val) => {
                      self.http.put({
                        url: '/interview/flag',
                        param: {
                          'interview.flg': val,
                          'interview.id': params.row.interviewId,
                        },
                      })
                    },
                  },
                }),
              ])
            },
          },
          {
            title: '线索状态',
            key: 'statu',
            width: 150,
          },
          {
            title: '接待者',
            key: 'autor',
            width: 150,
          },
          {
            title: '添加人',
            key: 'cu',
            width: 150,
          },
          {
            title: '应聘职位',
            key: 'ypzw',
            width: 150,
          },
          {
            title: '线索来源',
            key: 'source',
            width: 150,
          },

          {
            title: '操作',
            slot: 'action',
            width: 150,
            fixed: 'right',
          },
        ],
        data: [],
      },
      autorUserId: '',
      resourceRecordId: '',
      autorList: [],
      modal2: false,
      nowDate: '',
      currentTime: new Date(),
      sourceList: [],
      isSelectAutor: true,
	  orsourceList:[
	  		  {value:'58同城',label:'58同城'},
	  		  {value:'智联招聘',label:'智联招聘'},
	  		  {value:'前程无忧',label:'前程无忧'},
	  		  {value:'boss直聘',label:'boss直聘'},
	  		  {value:'拉勾网',label:'拉勾网'},
	  		  {value:'51job',label:'51job'},
	  		  {value:'其他',label:'其他'}
	  ]
    }
  },
  methods: {
    showPersonDetail: function(row) {
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    addBackview: function(row) {
      this.$router.push({
        name: 'backview_new', //跳转至XX新增页面
        params: {
          row,
          stageId: 2,
        },
      })
    },
    addReservationTryTime: function(row) {
      this.$router.push({
        name: 'reservationTry_new', //跳转至XX新增页面
        params: {
          row,
          stageId: 2,
        },
      })
    },
    addReservationBackviewTime: function(row) {
      this.$router.push({
        name: 'reservationBackview_new', //跳转至XX新增页面
        params: {
          row,
          stageId: 2,
        },
      })
    },
    showAll: function() {
      this.isShow = !this.isShow
    },
    showPart: function() {
      this.isShow = !this.isShow
    },
    init: function() {
      this.$data.tableInfo.page = 1
      this.searchInterviewList()
      this.getTime()
    },
    getTime() {
      const date = new Date()
      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.nowDate = year + '-' + month + '-' + day
    },
    rowClassName(row, index, nowDate) {
      if (row.reservationBackviewTime == null) {
        return
      }
      let str = row.reservationBackviewTime
      str = str.substring(0, 10)
      if (this.nowDate == str) {
        return 'demo-table-row'
      } else if (this.nowDate != str) {
        return ''
      }
    },
    newInterview: function() {
      this.$router.push({
        name: 'interview_new',
      })
    },
    show: function(row) {
      this.$router.push({
        name: 'interview_detail',
        params: {
          row,
        },
      })
    },
    update(interviewId) {
      this.$router.push({
        name: 'interview_update',
        params: {
          interviewId,
        },
      })
    },
    remove: function(interviewId) {
      this.message.confirm({
        title: '删除提示',
        content: '即将删除线索，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: '/interview',
              param: {
                interviewId,
              },
            })
            .then((data) => {
              this.searchInterviewList()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    searchInterviewList: function() {
      let param = {
        page: this.$data.tableInfo.page,
        size: this.$data.tableInfo.size,
        interviewStartTime: this.$data.searchInterviewStartTime,
        interviewEndTime: this.$data.searchInterviewEndTime,
        reservationTryStartTime: this.$data.searchReservationTryStartTime,
        reservationTryEndTime: this.$data.searchReservationTryEndTime,
        reservationBackviewStartTime: this.$data
          .searchReservationBackviewStartTime,
        reservationBackviewEndTime: this.$data.searchReservationBackviewEndTime,
        indistinctName: this.$data.searchIndistinctName,
        'student.name': this.$data.searchName,
        'student.tel': this.$data.searchTel,
        'resource.source': this.$data.searchSource,
        'interview.ypzw': this.$data.searchYpzw,
        'interview.autor': this.$data.searchAutor,
        'resource.statu': this.$data.searchStatu,
      }
      this.http
        .get({
          url: '/interview/list',
          param: param,
        })
        .then((data) => {
          this.$data.tableInfo.page = data.pageInfo.page
          this.$data.tableInfo.size = data.pageInfo.size
          this.$data.tableInfo.total = data.pageInfo.total
          this.$data.tableInfo.totalPage = data.pageInfo.totalPage
          this.$data.tableInfo.data = parseDataObj(data)
        })
    },
    pageSearch: function(changedPage) {
      this.$data.tableInfo.page = changedPage
      this.searchInterviewList()
    },
    changeSize: function(changeSize) {
      this.$data.tableInfo.size = changeSize
      this.searchInterviewList()
    },
    //分配线索
    updateInterviewAutor: function(row) {
      this.http
        .get({
          url: `/interview/info/${row.interviewId}`,
        })
        .then((data) => {
          this.resourceRecordId = data.interview.id
        })

      this.modal2 = false

      this.$Modal.confirm({
        title: '分配线索',

        render: (h, params) => {
          return h(
            'Select',
            {
              props: {
                value: row.autor, // 获取选择的下拉框的值
                size: 'small',
              },
              on: {
                'on-change': (val) => {
                  this.autorUserId = val
                },
              },
            },
            this.autorList.map(function(item) {
              return h('Option', {
                props: {
                  value: item.value,
                  label: item.label,
                },
              })
            })
          )
        },

        onOk: () => {
          this.http
            .put({
              url: '/interview/autor',
              param: {
                'interview.id': this.resourceRecordId,
                'user.userId': this.autorUserId,
              },
            })
            .then((data) => {
              this.searchInterviewList()
              this.message.info('分配成功')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    newTry: function(row) {
      this.$router.push({
        name: 'try_new',
        params: {
          row,
        },
      })
    },
    //转报名
    newbaoming: function(row) {
      this.$router.push({
        name: 'baoming_new',
        params: {
          row,
        },
      })
    },
    //放弃线索
    abandon: function(row) {
      let param = {
        'resource.id': row.resourceId,
      }
      this.message.confirm({
        title: '放弃提示',
        content: '即将放弃【' + row.name + '】的线索，确定吗？',

        onOk: () => {
          this.http
            .put({
              url: '/interview/abandon',
              param: param,
            })
            .then((data) => {
              this.searchInterviewList()
              this.message.info('放弃成功')
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
  },
  created: function() {
    //从session中取出用户列表
    let userList = JSON.parse(localStorage.getItem('USER_LIST'))
    userList.forEach((user) => {
      let u = {
        value: user.userId,
        label: user.nickName,
      }
      this.autorList.push(u)
    })
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    currentUser.permissions.forEach((twopermission) => {
      twopermission.permissions.forEach((per) => {
        if (per.name == '可分配') {
          this.isSelectAutor = false
        }
      })
    })

    this.sourceList = [
      {
        value: '待回访(到访)',
        label: '待回访(到访)',
        isDisabled: false,
      },
      {
        value: '未试听',
        label: '未试听',
        isDisabled: false,
      },
    ]
    this.init()
    this.getTime()
  },
}

/*
      	此函数主要解析返回的data，将复杂的级联对象封装为tableinfo所对应的字段的对象
      */
function parseDataObj(data) {
  //从session中取出用户的集合
  let userList = JSON.parse(localStorage.getItem('USER_LIST'))
  // let userList = JSON.parse(store.state.currentUser)
  //定义一个跟进人名字变量
  let autorName = ''
  //定义一个添加人名字变量
  let cuName = ''
  var InterviewArray = []

  data.list.forEach((list) => {
    if (list.reservationTry == undefined) {
      var judegReservationTryTime = null
    } else {
      judegReservationTryTime = list.reservationTry.datetime
    }
    if (list.reservationBackview == undefined) {
      var judegReservationBackviewTime = null
    } else {
      judegReservationBackviewTime = list.reservationBackview.datetime
    }
    let autorName = null
    userList.forEach((user) => {
      if (user.userId == list.interview.autor) {
        autorName = user.nickName
      }
      if (user.userId == list.interview.cu) {
        cuName = user.nickName
      }
    })
    let poko = {
      interviewId: list.interview.id,
      name: list.student.name,
      tel: list.student.tel,
      ypzw: list.interview.ypzw,
      statu: list.resource.statu,
      des: list.interview.des,
      autor: autorName,
      datetime: list.interview.dateTime,
      reservationTryTime: judegReservationTryTime,
      reservationBackviewTime: judegReservationBackviewTime,
      source: list.resource.source,
      flg: list.interview.flg,
      studentId: list.student.id, //wuweinan  =  luoxin
      cu: cuName,
      resourceId: list.resource.id,
      studentId: list.student.id,
      autorId: list.interview.autor, //wuweinan => luoxin 2021-7-31 20:05
      reservationTryId: list.reservationTry.id,
      reservationBackviewId: list.reservationBackview.id,
    }
    InterviewArray.push(poko)
  })
  return InterviewArray
}
</script>

<style scoped>
.to {
  padding: 10px 10px 0px 30px;
}

.search {
  margin-right: 5px;
}
.hidden {
  position: relative;
  top: 2px;
  cursor: pointer;
  color: gray;
  font-size: 12px;
  padding: 0px 0px 0px 1050px;
}

.bottom {
  text-align: center;
  z-index: 0;
}
.ivu-select-dropdown button {
  display: block;
  margin: 5px 10px;
  width: 120px;
}
.ivu-select-dropdown .ivu-dropdown-item {
  padding: 0;
}
.ivu-table .demo-table-row2 td {
  background-color: white;
}
</style>
<style>
.ivu-select-dropdown {
  max-height: 325px;
}
.ivu-table .demo-table-row td {
  background-color: #f1939c;
  color: #ffffff;
}
</style>
